import { useState } from 'react'
import { MdAutoDelete, MdContentCopy, MdEdit } from 'react-icons/md'
import styled from 'styled-components'
import ConfirmDelete from '../../ui/ConfirmDelete.jsx'
import Menus from '../../ui/Menus.jsx'
import Modal from '../../ui/Modal.jsx'
import Table from '../../ui/Table.jsx'
import { formatCurrency } from '../../utils/helpers'
import CreateCabinForm from './CreateCabinForm.jsx'
import { useCreateCabin } from './useCreateCabin.js'
import { useDeleteCabin } from './useDeleteCabin.js'

// const TableRow = styled.div`
//   display: grid;
//   grid-template-columns: 0.6fr 1.8fr 2.2fr 1fr 1fr 1fr;
//   column-gap: 2.4rem;
//   align-items: center;
//   padding: 1.4rem 2.4rem;
//
//   &:not(:last-child) {
//     border-bottom: 1px solid var(--color-grey-100);
//   }
// `

const Img = styled.img`
  display: block;
  width: 6.4rem;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center;
  transform: scale(1.5) translateX(-7px);
`

const Cabin = styled.div`
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--color-grey-600);
  font-family: "Sono";
`

const Price = styled.div`
  font-family: "Sono",serif;
  font-weight: 600;
`

const Discount = styled.div`
  font-family: "Sono",serif;
  font-weight: 500;
  color: var(--color-green-700);
`

export default function CabinRow({ cabin }) {
	const [_showForm, setShowForm] = useState(false)
	const { name, maxCapacity, regularPrice, discount, image, id, description } =
		cabin

	const { isDeleting, deleteCabin } = useDeleteCabin()
	const { isCreating, createCabin } = useCreateCabin()

	function handleCreate() {
		const newCabin = {
			name: `${name} copy`,
			maxCapacity,
			regularPrice,
			discount,
			image,
			description,
		}
		createCabin(newCabin)
	}

	return (
		<Table.Row columns='0.6fr 1.8fr 2.2fr 1fr 1fr 1fr'>
			<Img src={image} />
			<Cabin>{name}</Cabin>
			<div>Fits up tp {maxCapacity} guests</div>
			<Price>{formatCurrency(regularPrice)}</Price>
			<Discount>{formatCurrency(discount)}</Discount>
			<div>
				<Modal>
					<Menus.Menu>
						<Menus.Toggle id={id} />

						<Menus.List id={id}>
							<Menus.Button
								icon={<MdContentCopy />}
								onClick={handleCreate}
							>
								Duplicate
							</Menus.Button>
							<Modal.Open opens='edit'>
								<Menus.Button
									icon={<MdEdit />}
									onClick={() => setShowForm(false)}
								>
									Edit
								</Menus.Button>
							</Modal.Open>
							<Modal.Open opens='delete'>
								<Menus.Button
									icon={<MdAutoDelete />}
									onClick={() => deleteCabin(id)}
								>
									Delete
								</Menus.Button>
							</Modal.Open>
						</Menus.List>

						<Modal.Window name='edit'>
							<CreateCabinForm
								cabinToEdit={cabin}
								onClose={() => setShowForm(false)}
							/>
						</Modal.Window>

						<Modal.Window name='delete'>
							<ConfirmDelete
								resourceName='cabins'
								disabled={isDeleting}
								onClose={() => setShowForm(false)}
								onConfirm={() => deleteCabin(id)}
							/>
						</Modal.Window>
					</Menus.Menu>
				</Modal>
			</div>
		</Table.Row>
	)
}
